<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>求购合同详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="../../../component/elementUI/index.css">
    <link rel="stylesheet" href="../../../style/index.css">
</head>

<body>
<div id="app" v-cloak class="minWidth" style="padding: 15px;">
    <el-card shadow="never" style="margin-bottom: 12px;">
        <div slot="header" class="clearfix" style="display:flex; align-items:center; justify-content:space-between;">
            <span>求购-合同</span>
            <div style="display:flex; align-items:center; gap:8px;">
                <el-button size="small" @click="handleBack">返回</el-button>
                <el-input v-model="form.value" placeholder="搜索订单或企业" clearable size="small" style="width:260px;" @keyup.enter.native="handleSerach"></el-input>
                <el-button type="primary" size="small" @click="handleSerach">搜索</el-button>
            </div>
        </div>

        <!-- 顶部统一报价原信息 -->
        <div v-if="pageAcquisition" style="margin-bottom: 12px;">
            <div style="font-weight: 600; color:#606266; margin-bottom: 6px;">报价原信息</div>
            <el-descriptions :column="3" size="small" border>
                <el-descriptions-item>
                    <template slot="label">报价编号</template>
                    <span>{{ pageAcquisition.Acquisition_Unit_Price_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">商品编号</template>
                    <span>{{ pageAcquisition.Article_SerialNumber }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">供应总量</template>
                    <span>{{ pageAcquisition.Total_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">已售量</template>
                    <span>{{ pageAcquisition.Sales_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">剩余量</template>
                    <span>{{ getRemainQuantity(pageAcquisition) }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">起订量</template>
                    <span>{{ pageAcquisition.Start_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">步长</template>
                    <span>{{ pageAcquisition.Unit_Quantity }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">单价</template>
                    <span>{{ pageAcquisition.Unit_Price }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系人</template>
                    <span>{{ pageAcquisition.Contacts }}</span>
                </el-descriptions-item>
                <el-descriptions-item>
                    <template slot="label">联系电话</template>
                    <span>{{ pageAcquisition.Contacts_Phone }}</span>
                </el-descriptions-item>
                <el-descriptions-item :span="3">
                    <template slot="label">收货地址</template>
                    <span>{{ formatAddress(pageAcquisition) }}</span>
                </el-descriptions-item>
            </el-descriptions>
        </div>

        <!-- 卡片列表（滚动容器） -->
        <div style="max-height: 540px; overflow-y: auto; padding-right: 4px;">
            <el-card v-for="row in list" :key="row.Acquisition_Order_SerialNumber" shadow="never" style="margin-bottom: 12px;">
                <div slot="header" class="clearfix">
                    <span>订单 {{ row.Acquisition_Order_SerialNumber }}</span>
                    <div style="float:right; display:flex; gap:6px; align-items:center;">
                        <el-tag :type="statusTagType(row.Row_Status)">{{ formatStatus(row.Row_Status) }}</el-tag>
                        <el-tag :type="contractStatusTagType(row.Contract_Status)">{{ formatContractStatus(row.Contract_Status) }}</el-tag>
                    </div>
                </div>
                <el-descriptions :column="3" border size="small">
                    <el-descriptions-item>
                        <template slot="label">报价编号</template>
                        <span>{{ row.Acquisition_Unit_Price_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">企业流水号</template>
                        <span>{{ row.Enterprise_Info_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">交易数量</template>
                        <span>{{ row.Quantity }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">总金额</template>
                        <span>{{ row.Amount }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">已付金额</template>
                        <span>{{ row.Paid_Amount }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">剩余金额</template>
                        <span>{{ row.Remain_Amount }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">装运方式</template>
                        <span>{{ row.Shipment_Method_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">运输方式</template>
                        <span>{{ row.Transport_Method_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">付款方式</template>
                        <span>{{ row.Payment_Method_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">交易流水号</template>
                        <span>{{ row.Trading_SerialNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">联系人</template>
                        <span>{{ row.Contacts }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">联系人电话</template>
                        <span>{{ row.Contacts_Phone }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">收货省</template>
                        <span>{{ row.ProvinceNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">收货市</template>
                        <span>{{ row.CityNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item>
                        <template slot="label">收货区</template>
                        <span>{{ row.CountyNumber }}</span>
                    </el-descriptions-item>
                    <el-descriptions-item :span="3">
                        <template slot="label">详细地址</template>
                        <span>{{ row.Detailed_Address }}</span>
                    </el-descriptions-item>
                </el-descriptions>
                <!-- 分次付款账单详情：仅展示当前订单对应报价的阶段付款计划 -->
                <div style="margin-top: 12px; background:#f5f7fa; padding:10px; border-radius:4px;">
                    <div style="font-weight:600;color:#606266;margin-bottom:8px;">分次付款账单详情</div>
                    <el-table :data="row._stagePaymentsFixed || []" border size="small" style="width: 100%">
                        <el-table-column prop="stage" label="付款阶段" width="120"></el-table-column>
                        <el-table-column prop="percent" label="付款比例" width="120">
                            <template slot-scope="scope">{{ (scope.row.percent !== undefined && scope.row.percent !== null && scope.row.percent !== '') ? (Number(scope.row.percent) + '%') : '' }}</template>
                        </el-table-column>
                        <el-table-column prop="dueAmount" label="应付款金额" width="140">
                            <template slot-scope="scope">{{ (scope.row.dueAmount !== undefined && scope.row.dueAmount !== null && scope.row.dueAmount !== '') ? scope.row.dueAmount : '' }}</template>
                        </el-table-column>
                        <el-table-column prop="payWindow" label="付款周期" min-width="200">
                            <template slot-scope="scope">{{ scope.row.payWindow || '' }}</template>
                        </el-table-column>
                        <el-table-column label="操作" width="240">
                            <template slot-scope="scope">
                                <!-- 甲方视图：仅显示付款、收货 -->
                                <el-button
                                    size="mini"
                                    type="primary"
                                    @click="openPayDialog(row, scope.row)"
                                    :disabled="!isContractConfirmed(row) || !actionEnabled(scope.row, 'pay')">
                                    付款
                                </el-button>
                                <el-button
                                    size="mini"
                                    @click="openReceiveDialog(row, scope.row)"
                                    :disabled="!isContractConfirmed(row) || !actionEnabled(scope.row, 'receive') || isOrderLocked(row)">
                                    收货
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div v-if="!(row._stagePaymentsFixed && row._stagePaymentsFixed.length)" style="padding: 8px; color: #909399;">暂无阶段付款信息</div>
                </div>
                <!-- 操作按钮：依据发布方和接收方展示操作按钮，发布方确认，申请方确认，确认后发布方确认合同按钮位置显示发布方已确认，申请方确认合同位置显示申请方已确认 -->
                <div  style="margin-top: 12px; text-align:center;">
                    <el-button
                        type="success"
                        size="mini"
                        @click="confirmByB(row)"
                        :disabled="String(row.Contract_Status)==='01' || String(row.Contract_Status)==='11'"
                    >乙方确认合同</el-button>
                    <el-button
                        type="danger"
                        size="mini"
                        @click="confirmByA(row)"
                        :disabled="String(row.Contract_Status)==='10' || String(row.Contract_Status)==='11'"
                    >甲方确认合同</el-button>
                </div>
            </el-card>

            <div v-if="!list || list.length===0" style="padding: 12px; color: #909399;">暂无记录</div>
        </div>

        <div style="margin-top: 10px; text-align:right;">
            <el-pagination
                    @current-change="handlePageChange"
                    :current-page="form.PageNumber"
                    :page-size="form.RowAmount"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>
    </el-card>

    <!-- 阶段付款弹窗 -->
    <el-dialog :visible.sync="dialogPayVisible" title="阶段付款" width="480px">
        <div>
            <el-form label-width="90px">
                <el-form-item label="付款金额">
                    <el-input v-model="payForm.amount" placeholder="请输入金额"></el-input>
                </el-form-item>
                <el-form-item label="付款凭证">
                    <el-upload
                            :file-list="payForm.voucherList"
                            :auto-upload="false"
                            :on-change="onVoucherChange"
                            :on-remove="onVoucherRemove"
                            accept="image/*"
                            list-type="picture">
                        <el-button size="small" type="primary">选择图片</el-button>
                        <div slot="tip" class="el-upload__tip">支持jpg/png，大小≤10MB</div>
                    </el-upload>
                </el-form-item>
            </el-form>
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogPayVisible=false" :disabled="paySaving">取 消</el-button>
            <el-button type="primary" @click="confirmPay" :loading="paySaving">确 认</el-button>
        </span>
    </el-dialog>

    <!-- 收款详情弹窗：展示付款时填写的内容 -->
    <el-dialog title="合同详情" :visible.sync="dialogReceiptVisible" width="560px" :close-on-click-modal="true">
        <div v-if="receiptContext && receiptContext.order" style="margin-bottom: 12px; color:#606266; display:flex; gap:24px;">
            <span>合同总额：<b>{{ receiptView.contractAmount }}</b>元</span>
            <span>本期付款额：<b>{{ receiptView.stageDueAmount }}</b>元</span>
            <span>实际收款金额：<b>{{ receiptView.actualAmount }}</b>元</span>
        </div>
        <div v-if="receiptView.voucherUrl" style="text-align:center;">
            <img :src="receiptView.voucherUrl" alt="电子凭证" style="max-width:100%; max-height:360px;" />
        </div>
        <div v-else style="padding: 8px; color:#909399;">暂无电子凭证</div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogReceiptVisible=false">确 定</el-button>
        </span>
    </el-dialog>

    <!-- 填写物流弹窗（映射到供应单） -->
    <el-dialog title="填写物流" :visible.sync="dialogShipVisible" width="560px" :close-on-click-modal="false">
        <el-form :model="shipForm" label-width="120px">
            <el-form-item label="物流公司">
                <el-select v-model="shipForm.logisticsCode" placeholder="请选择物流公司" filterable style="width: 320px;">
                    <el-option v-for="opt in logisticsOptions" :key="opt.Logistics_Code" :label="opt.Logistics_Name" :value="opt.Logistics_Code" />
                </el-select>
            </el-form-item>
            <el-form-item label="物流单号">
                <el-input v-model.trim="shipForm.logisticsNumber" placeholder="请输入物流单号" style="width: 320px;" />
            </el-form-item>
            <el-form-item label="上传凭证">
                <el-upload
                    class="upload-demo"
                    action=""
                    :auto-upload="false"
                    :limit="1"
                    accept="image/*"
                    list-type="picture-card"
                    :file-list="shipForm.voucherList"
                    :on-change="onShipVoucherChange"
                    :on-remove="onShipVoucherRemove">
                    <i class="el-icon-plus"></i>
                    <div slot="tip" class="el-upload__tip">仅支持图片文件，最多上传1张。</div>
                </el-upload>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogShipVisible=false" :disabled="shipSaving">取消</el-button>
            <el-button type="primary" :loading="shipSaving" @click="confirmShip">确定</el-button>
        </span>
    </el-dialog>

    <!-- 收货详情弹窗（查看物流信息） -->
    <el-dialog title="收货详情" :visible.sync="dialogReceiveVisible" width="560px" :close-on-click-modal="true">
        <div v-if="receiveView" style="margin-bottom: 12px; color:#606266;">
            <div>物流公司：<b>{{ receiveView.Logistics_Name || receiveView.Logistics_Code }}</b></div>
            <div>物流单号：<b>{{ receiveView.Logistics_Number }}</b></div>
            <div>发货时间：<b>{{ receiveView.Delivery_Data }}</b></div>
        </div>
        <div v-if="receiveView && receiveView.Picture_URL" style="text-align:center;">
            <img :src="receiveView.Picture_URL" alt="电子凭证" style="max-width:100%; max-height:360px;" />
        </div>
        <div v-else style="padding: 8px; color:#909399;">暂无电子凭证</div>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="onConfirmReceive">确 定</el-button>
        </span>
    </el-dialog>
</div>

<script type="text/javascript" src="../../../utils/jquery.min.js"></script>
<script type="text/javascript" src="../../../utils/jquery.cookie.js"></script>
<script type="text/javascript" src="../../../utils/vue.min.js"></script>
<script type="text/javascript" src="../../../component/elementUI/index.js"></script>
<script type="text/javascript" src="../../../utils/utils.js"></script>
<script type="text/javascript" src="../../../utils/http.js"></script>
<script type="text/javascript" src="../../../utils/components.js"></script>
<script src="./js/contract_details.js"></script>
</body>
</html>